<html>
<head>
    <title>CDNBye videojs demo</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.2/video-js.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.2/alt/video.core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.13"></script>
    <!-- videojs-hls-quality-selector -->
    <script src="//cdn.jsdelivr.net/npm/videojs-contrib-quality-levels@2.0.9/dist/videojs-contrib-quality-levels.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/videojs-hls-quality-selector@1.1.1/dist/videojs-hls-quality-selector.min.js"></script>
    <!-- cdnbye-p2p-plugin -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/videojs-hlsjs-plugin.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
</head>
<body>
<video id=video width=600 height=300 class="video-js vjs-default-skin" controls>
</video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
    var options = {
        autoplay: true,
        sources:[
            {
                src: 'https://test-streams.mux.dev/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8',
            },
        ],
        html5: {
            hlsjsConfig: {
                // Put your hls.js config here
                // debug: true,
                maxBufferSize: 0,
                maxBufferLength: 10,
                liveSyncDurationCount: 10,
            }
        }
    };
    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
        if (P2PEngine.isSupported()) {
            var engine = new P2PEngine(hlsjsInstance, {
                // logLevel: 'debug',
                getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
                    var total = totalHTTPDownloaded + totalP2PDownloaded;
                    document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
                },
            });
        }
    });
    var player = videojs('video', options);
    player.hlsQualitySelector();
</script>
</body>
</html>
